<!-- eslint-disable vue/no-template-shadow -->
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1100px">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="食谱名称" prop="recipeName">
          <el-input
            v-model="queryParams.recipeName"
            placeholder="请输入食谱名称"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item label="餐饮套餐" prop="comboId">
          <el-select v-model="queryParams.comboId" placeholder="请选择餐饮套餐" :clearable="true" />
        </el-form-item>
        <el-form-item label="食谱类型" prop="recipeType">
          <el-select
            v-model="queryParams.recipeType"
            placeholder="请选择食谱类型"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button @click="saveValues"> 保存 </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :page-data="queryData"
        save-key="RestaurantRecipeSelect"
        @page-change="getPage"
        @row-dblclick="handleTableDblclick"
        height="500"
      >
        <template #expand="{ row }">
          <Table
            :data="row.details"
            :columns="childColumns"
            @row-dblclick="handleChildTableDblclick"
          >
            <template #typeId="{ row }">
              {{ dishTypeList.find((obj) => obj.id === row.dish.typeId).name }}
            </template>
            <template #imgUrl="{ row }">
              <span v-if="row.dish.imgUrl == ''"></span>
              <el-image
                v-else
                preview-teleported
                loading="lazy"
                :src="row.dish.imgUrl"
                :preview-src-list="[row.dish.imgUrl]"
                fit="cover"
                class="w-[100px] h-[100px]"
              />
            </template>
            <template #taboo="{ row }">
              {{
                row.dish.taboo
                  .map((element) => {
                    return getDictObj(DICT_TYPE.RESTAURANT_DISH_TABOO, element).label
                  })
                  .join(',')
              }}
            </template>
          </Table>
        </template>
        <template #comboId="{ row }">
          {{ comboList.find((obj) => obj.id === row.comboId).comboName }}
        </template>
        <template #recipeType="{ row }">
          {{ getDictObj(DICT_TYPE.RESTAURANT_RECIPE_TYPE, row.recipeType).label }}
        </template>
        <template #imgUrl="{ row }">
          <span v-if="row.imgUrl == ''"></span>
          <el-image
            v-else
            preview-teleported
            loading="lazy"
            :src="row.imgUrl"
            :preview-src-list="[row.imgUrl]"
            fit="cover"
            class="w-[100px] h-[100px]"
          />
        </template>
      </Table>
    </ContentWrap>
    <ContentWrap>
      <Table
        :columns="selectColumns"
        :data="selectInfoList"
        height="200"
        @row-dblclick="handleSelectTableDblclick"
      >
        <template #typeId="{ row }">
          {{ dishTypeList.find((obj) => obj.id === row.typeId).name }}
        </template>
        <template #imgUrl="{ row }">
          <span v-if="row.imgUrl == ''"></span>
          <el-image
            v-else
            preview-teleported
            loading="lazy"
            :src="row.imgUrl"
            :preview-src-list="[row.imgUrl]"
            fit="cover"
            class="w-[100px] h-[100px]"
          />
        </template>
        <template #taboo="{ row }">
          {{
            row.taboo
              .map((element) => {
                return getDictObj(DICT_TYPE.RESTAURANT_DISH_TABOO, element).label
              })
              .join(',')
          }}
        </template>
      </Table>
    </ContentWrap>
  </Dialog>
</template>
<script setup name="RestaurantRecipeSelect" lang="ts">
import * as RestaurantRecipeApi from '@/api/restaurant/recipe'
import * as RestaurantDishApi from '@/api/restaurant/dish'
import * as RestaurantDishModel from '@/model/restaurant/dish/RestaurantDish'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
const dishTypeList = ref()
const selectInfoList = ref<RestaurantDishModel.RestaurantDish[]>([]) // 选中的字段列表
const dialogTitle = ref('')
const comboList = ref()
const dialogVisible = ref(false)
const queryFormRef = ref()
const queryParams = ref({
  recipeName: undefined,
  comboId: undefined,
  recipeType: undefined
})
const queryData = ref()
const columns = [
  {
    type: 'expand',
    slot: 'expand'
  },
  {
    label: '食谱名称',
    prop: 'recipeName'
  },
  {
    label: '套餐ID',
    prop: 'comboId',
    slot: 'comboId'
  },
  {
    label: '食谱类型',
    prop: 'recipeType',
    slot: 'recipeType'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '图片',
    prop: 'imgUrl',
    slot: 'imgUrl'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]

const childColumns = [
  {
    label: '名称',
    prop: 'dish.name'
  },
  {
    label: '餐品类型',
    prop: 'dish.typeId',
    slot: 'typeId'
  },
  {
    label: '价格',
    prop: 'dish.price'
  },
  {
    label: '辣味',
    prop: 'dish.spicy'
  },
  {
    label: '口感',
    prop: 'dish.taste'
  },
  {
    label: '口味',
    prop: 'dish.flavor'
  },
  {
    label: '图片',
    prop: 'dish.imgUrl',
    slot: 'imgUrl'
  },
  {
    label: '禁忌人群',
    prop: 'dish.taboo',
    slot: 'taboo'
  }
]

const selectColumns = [
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '餐品类型',
    prop: 'typeId',
    slot: 'typeId'
  },
  {
    label: '价格',
    prop: 'price'
  },
  {
    label: '辣味',
    prop: 'spicy'
  },
  {
    label: '口感',
    prop: 'taste'
  },
  {
    label: '口味',
    prop: 'flavor'
  },
  {
    label: '图片',
    prop: 'imgUrl',
    slot: 'imgUrl'
  },
  {
    label: '禁忌人群',
    prop: 'taboo',
    slot: 'taboo'
  }
]

const emit = defineEmits(['selectValue'])
/** 打开弹窗 */
const open = async (recipeList) => {
  dialogVisible.value = true
  dishTypeList.value = await RestaurantDishApi.listQueryDishType()
  comboList.value = await RestaurantRecipeApi.listQueryCombo()
  getPage()
  selectInfoList.value = recipeList
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await RestaurantRecipeApi.pageQueryDetail(queryParams.value)
}

const saveValues = () => {
  emit('selectValue', selectInfoList.value)
  close()
}

const handleChildTableDblclick = (row) => {
  if (
    selectInfoList.value.filter((selectDish) => {
      return selectDish.id == row.dish.id
    }).length > 0
  )
    return
  selectInfoList.value.push(row.dish)
}

const handleTableDblclick = (row) => {
  row.details.forEach((detail) => {
    if (
      selectInfoList.value.filter((selectDish) => {
        return selectDish.id == detail.dish.id
      }).length > 0
    )
      return
    selectInfoList.value.push(detail.dish)
  })
}

/** 关闭弹窗 */
const close = () => {
  dialogVisible.value = false
}

const handleSelectTableDblclick = (row) => {
  const index = selectInfoList.value.indexOf(row)
  selectInfoList.value.splice(index, 1)
}
</script>
